<!-- src/layouts/BasicLayout.vue -->
<template>
    <div class="app-container">
        <div style="display: flex;">
            <HeaderLogo />
            <HeaderBar />
        </div>
        <Sidebar class="sidebar-container" v-show="routePath != '/myEnterprise/certify' && routePath != '/perCertify'" />
        <div :class="{ main: routePath != '/myEnterprise/certify' && routePath != '/perCertify' }">
            <app-main />
        </div>
    </div>
</template>

<script setup lang="ts">
import HeaderLogo from '@/components/HeaderLogo.vue';
import Sidebar from '@/components/Sidebar.vue'
import AppMain from '@/components/AppMain.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const routePath = ref(route.path)

watch(
    () => route.path,
    (newPath) => {
        // console.log(newPath)
        routePath.value = newPath
    }
)

</script>

<style lang="scss" scoped>
.app-container {
    min-height: calc(100vh - 90px);
    overflow: hidden;

    .sidebar-container {
        width: 220px;
        height: calc(100vh - 90px);
        position: fixed;
        top: 90px;
        left: 0;
        background: #ffffff;
    }

    .main {
        margin-left: 220px;
    }
}
</style>